<template>
	<view class="loader" v-show="showLoader">
		<view class="loader-inner">
			<view class="loader-line-wrap" v-for="(item, index) in 5" :key="index">
				<view class="loader-line"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Loader',
	props: {
		visible: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			internalVisible: false
		}
	},
	computed: {
		showLoader() {
			return this.visible || this.internalVisible
		}
	},
	mounted() {
		// 监听全局事件
		uni.$on('show-loading', this.showLoading)
		uni.$on('hide-loading', this.hideLoading)
	},
	beforeDestroy() {
		// 移除事件监听
		uni.$off('show-loading', this.showLoading)
		uni.$off('hide-loading', this.hideLoading)
	},
	methods: {
		showLoading() {
			console.log('show-loading')
			this.internalVisible = true
		},
		hideLoading() {
			console.log('hide-loading')
			this.internalVisible = false
		}
	}
}
</script>

<style lang="scss" scoped>
.loader {
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 999999999;
	
	.loader-inner {
		bottom: 0;
		height: 60px;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		top: 0;
		width: 100px;
	}
	
	.loader-line-wrap {
		animation: spin 2s cubic-bezier(.175, .885, .32, 1.275) infinite;
		box-sizing: border-box;
		height: 50px;
		left: 0;
		overflow: hidden;
		position: absolute;
		top: 0;
		transform-origin: 50% 100%;
		width: 100px;
		
		&:nth-child(1) {
			animation-delay: -50ms;
			
			.loader-line {
				border-color: #eb4747;
				height: 90px;
				width: 90px;
				top: 7px;
			}
		}
		
		&:nth-child(2) {
			animation-delay: -.1s;
			
			.loader-line {
				border-color: #ebeb47;
				height: 76px;
				width: 76px;
				top: 14px;
			}
		}
		
		&:nth-child(3) {
			animation-delay: -.15s;
			
			.loader-line {
				border-color: #47eb47;
				height: 62px;
				width: 62px;
				top: 21px;
			}
		}
		
		&:nth-child(4) {
			animation-delay: -.2s;
			
			.loader-line {
				border-color: #47ebeb;
				height: 48px;
				width: 48px;
				top: 28px;
			}
		}
		
		&:nth-child(5) {
			animation-delay: -.25s;
			
			.loader-line {
				border-color: #4747eb;
				height: 34px;
				width: 34px;
				top: 35px;
			}
		}
	}
	
	.loader-line {
		border: 4px solid transparent;
		border-radius: 100%;
		box-sizing: border-box;
		height: 100px;
		left: 0;
		margin: 0 auto;
		position: absolute;
		right: 0;
		top: 0;
		width: 100px;
	}
}

@keyframes spin {
	0%,
	15% {
		transform: rotate(0);
	}
	
	100% {
		transform: rotate(1turn);
	}
}
</style>